<template>
  <el-dialog title="配置子控件"
             @close="dialogClose"
             :visible.sync="visible"
             width="80%"
             class="add-child-dialog">
    <el-button class="float-right"
               type="primary"
               icon="el-icon-plus"
               @click="addCheckItem">新增</el-button>
    <el-form :rules="rules"
             :model="childItemList"
             ref="ruleForm1">
      <el-table :data="childItemList.list"
                style="width: 100%">
        <el-table-column label="参数名"
                         align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'list.' + scope.$index+ '.name'"
                          :rules='rules.name'>
              <el-input v-model="scope.row.name"
                        size="mini"
                        @change="selectCode(scope,1)"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="参数代码"
                         align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'list.' + scope.$index + '.key'"
                          :rules='rules.key'>
              <el-input v-model="scope.row.key"
                        size="mini"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="数据类型"
                         align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'list.' + scope.$index + '.data_type'"
                          :rules='rules.data_type'>
              <el-select v-model="scope.row.dataType"
                         value-key="value"
                         size="mini"
                         @change="selectDataType(scope.row)">
                <el-option v-for="item in dataTypeCodeList"
                           :key="item.value"
                           :label="item.name"
                           :value="item"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="最大长度"
                         align="center">
          <template slot-scope="scope">
            <el-form-item style="width:100%!important;">
              <el-input-number v-model="scope.row.length"
                               :min="1"
                               :controls="false"
                               size="mini"></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="默认值"
                         align="center">
          <template slot-scope="scope">
            <el-form-item>
              <el-input v-model="scope.row.default_value"
                        size="mini"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="字段控件"
                         align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'list.' + scope.$index + '.control_type'"
                          :rules='rules.control_type'>
              <el-select v-model="scope.row.controlType"
                         value-key="value"
                         size="mini"
                         @change="selectControlType(scope.row)">
                <el-option v-for="item in scope.row.controlTypeList"
                           :key="item.value"
                           :label="item.name"
                           :value="item"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="控件配置"
                         align="center">
          <template slot-scope="scope">
            <el-form-item>
              <el-button v-if="scope.row.control_type=='array' || scope.row.control_type=='object'"
                         type="primary"
                         icon="el-icon-plus"
                         size="mini"
                         @click="openChildControl(scope.$index,scope.row.control_type)">配置子控件</el-button>
              <el-button v-if="scope.row.control_type=='listdrop' ||scope.row.control_type=='checkbox'||scope.row.control_type=='radio'"
                         type="primary"
                         icon="el-icon-plus"
                         size="mini"
                         @click="openChildConfig(scope.$index)">选项配置</el-button>
              <el-input v-if="scope.row.control_type=='dictionary' "
                        v-model="scope.row.dictionary"
                        size="mini"
                        placeholder="请输入数据字典"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="字段校验"
                         align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'list.' + scope.$index + '.check_type'"
                          :rules='rules.check_type'>
              <el-select v-model="scope.row.checkType"
                         multiple
                         placeholder="请选择"
                         collapse-tags
                         size="mini"
                         @change="selectCheckType(scope.row)">
                <el-option v-for="item in scope.row.checkTypeList"
                           :key="item.value"
                           :label="item.name"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="排序"
                         align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'list.' + scope.$index + '.sort'"
                          :rules='rules.sort'>
              <el-input v-model="scope.row.sort"
                        size="mini"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip content="删除"
                        placement="top">
              <el-button size="mini"
                         type="info"
                         icon="el-icon-error"
                         @click="deleteRow(scope.$index)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="btn-col">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button type="success"
                 @click="addChildItem">保 存</el-button>
    </div>
    <!-- <el-dialog title="配置子控件"
               :visible.sync="addChild"
               :modal="false"
               width="75%"
               append-to-body>
      <el-button class="float-right"
                 type="primary"
                 icon="el-icon-plus"
                 @click="addChildControl">新增</el-button>
      <el-form :rules="rules"
               :model="ruleForm2"
               ref="ruleForm2">
        <el-table :data="ruleForm2.controlChildData"
                  style="width: 100%">
          <el-table-column label="参数名"
                           align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'controlChildData.' + scope.$index+ '.name'"
                            :rules='rules.name'>
                <el-input v-model="scope.row.name"
                          size="mini"
                          @change="selectCode(scope.$index,scope.row.name,3)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="参数代码"
                           align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'controlChildData.' + scope.$index + '.key'"
                            :rules='rules.key'>
                <el-input v-model="scope.row.key"
                          size="mini"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="数据类型"
                           align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'controlChildData.' + scope.$index + '.data_type'"
                            :rules='rules.data_type'>
                <el-select v-model="scope.row.data_type"
                           size="mini"
                           @change="selectDataType(scope.row.data_type,3)">
                  <el-option v-for="item in dataType"
                             :key="item.content1"
                             :label="item.name"
                             :value="item.content1"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="最大长度"
                           align="center">
            <template slot-scope="scope">
              <el-form-item>
                <el-input-number v-model="scope.row.length"
                                 :min="1"
                                 :controls="false"
                                 size="mini"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="默认值"
                           align="center">
            <template slot-scope="scope">
              <el-form-item>
                <el-input v-model="scope.row.default_value"
                          size="mini"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="字段控件"
                           align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'controlChildData.' + scope.$index + '.control_type'"
                            :rules='rules.control_type'>
                <el-select v-model="scope.row.control_type"
                           size="mini"
                           @change="controlSelect(scope.row.control_type,3)">
                  <el-option v-for="item in fieldControl3"
                             :key="item.content1"
                             :label="item.name"
                             :value="item.content1"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="字段校验"
                           align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'controlChildData.' + scope.$index + '.check_type'"
                            :rules='rules.check_type'>
                <el-select v-model="scope.row.check_type"
                           multiple
                           placeholder="请选择"
                           collapse-tags
                           size="mini">
                  <el-option v-for="item in fieldCheck3"
                             :key="item.content1"
                             :label="item.name"
                             :value="item.content1">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="排序"
                           align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'controlChildData.' + scope.$index + '.sort'"
                            :rules='rules.sort'>
                <el-input v-model="scope.row.sort"
                          size="mini"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-tooltip content="删除"
                          placement="top">
                <el-button size="mini"
                           type="info"
                           icon="el-icon-error"
                           @click="deleteRow(scope.$index)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div class="btn-col">
        <el-button @click="addChild=false">取 消</el-button>
        <el-button type="success"
                   @click="addChildItem">保 存</el-button>
      </div>
    </el-dialog> -->
  </el-dialog>
</template>
<script>
import 'pinyin4js'
export default {
  data () {
    return {
      childItemList: {
        list: []
      },
      checkItemData: {

      },
      // 参数类型标准码列表
      paramTypeCodeList: [],
      // 参数类型标准吗map
      paramTypeMap: new Map(),
      // 数据类型标准码列表
      dataTypeCodeList: [],
      // 数据类型标准码map
      dataTypeMap: new Map(),
      // 字段控件标准码列表
      controlTypeCodeList: [],
      // 字段控件标准码map
      controlTypeMap: new Map(),
      // 校验类型标准码列表
      checkTypeCodeList: [],
      // 校验类型标准码map
      checkTypeMap: new Map(),
      visible: false,
      rules: {
        param_type: [
          { required: true, message: '请选择参数分类', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入参数名', trigger: 'blur' }
        ],
        key: [
          { required: true, message: '请输入参数代码', trigger: 'blur' }
        ],
        data_type: [
          { required: true, message: '请选择数据类型', trigger: 'change' }
        ],
        control_type: [
          { required: true, message: '请选择字段控件', trigger: 'change' }
        ],
        check_type: [
          { required: true, message: '请选择字段校验', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    dialogVisible: Boolean,
    dialogForm: Array,
    callback: Function
  },
  watch: {
    dialogVisible (newval, oldval) {
      this.visible = newval
    },
    dialogForm: {
      handler (newval, oldval) {
        //console.log(newval, 'dialogform')
        this.childItemList.list = JSON.parse(JSON.stringify(newval))
        // this.childItemList.list = this.checkItemData.children
      },
      deep: true
    }
  },
  methods: {
    dialogClose () {
      this.$emit('update:dialogVisible', false)
    },
    // 将参数名转换为参数代码
    selectCode (scope) {
      let data = scope.row.name
      scope.row.key = PinyinHelper.getShortPinyin(data)
    },
    // 保存子控件数据
    addChildItem () {
      // console.log(this.checkItemData, 'add child item')
      // this.$emit('update:dialogForm', this.childItemList.list)
      this.$emit('callback', this.childItemList)
      this.dialogClose()
    },
    deleteRow (index) {

    },
    // 数据类型下拉框选中事件
    selectDataType (row) {
      // console.log(row, 'select data type')
      row.data_type = row.dataType.value
      // 根据选中的数据类型筛选出对应的控件类型列表
      row.controlTypeList = this.controlTypeCodeList.filter(item => {
        return row.dataType.content2.includes(item.value)
      })
    },
    // 控件类型下拉框选中事件
    selectControlType (row) {
      row.control_type = row.controlType.value
      // 根据选中的控件类型筛选出对应的校验类型
      row.checkTypeList = this.checkTypeCodeList.filter(item => {
        return row.controlType.content2.includes(item.value)
      })
      //console.log(row, 'select control type')
    },
    // 选择校验类型下拉框选中事件
    selectCheckType (row) {
      row.check_type = row.checkType.join(',')
      //console.log(row)
    },
    // 新增检查项
    addCheckItem () {
      // 如果没有数据，手动赋值第一个数据的id为1，然后递增
      // 如果已有数据，从最后一个数据的id开始递增
      let checkItemId = 0
      let len = this.childItemList.list.length
      if (len === 0) {
        checkItemId = 0
      } else {
        checkItemId = +this.childItemList.list[len - 1].check_item_id + 1
      }
      let item = {
        check_item_id: checkItemId,
        param_type: '',
        name: '',
        key: '',
        data_type: '',
        length: '',
        default_value: '',
        control_type: '',
        check_type: [],
        sort: '',
        children: [],
        controlTypeList: [],
        checkTypeList: [],
        controlType: {},
        checkType: {},
        dataType: {}
      }
      this.childItemList.list.push(item)
    },
    // 获取参数类型标准码
    getParamTypeCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'param_type'
        }
      }).then(res => {
        console.log(res, 'get param type')
        if (res.code === 0 && res.data.list) {
          this.paramTypeCodeList = res.data.list
          window.localStorage.setItem('paramTypeCode', JSON.stringify(this.paramTypeCodeList))
        }
      })
    },

    // 获取数据类型标准码
    getDataTypeCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'data_type'
        }
      }).then(res => {
        //  console.log(res, 'get data type')
        if (res.code === 0 && res.data.list) {
          this.dataTypeCodeList = res.data.list
          window.localStorage.setItem('dataTypeCode', JSON.stringify(this.dataTypeCodeList))
          this.convertCodeListToMap(this.dataTypeMap, this.dataTypeCodeList)
        }
      })
    },
    // 获取字段控件标准码
    getControlTypeCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'field_control'
        }
      }).then(res => {
        // console.log(res, 'get control type')
        if (res.code === 0 && res.data.list) {
          this.controlTypeCodeList = res.data.list
          window.localStorage.setItem('controlTypeCode', JSON.stringify(this.controlTypeCodeList))
          this.convertCodeListToMap(this.controlTypeMap, this.controlTypeCodeList)
        }
      })
    },
    // 获取字段校验标准码
    getCheckTypeCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'field_check'
        }
      }).then(res => {
        // console.log(res, 'get control type')
        if (res.code === 0 && res.data.list) {
          this.checkTypeCodeList = res.data.list
          window.localStorage.setItem('checkTypeCode', JSON.stringify(this.checkTypeCodeList))
          this.convertCodeListToMap(this.checkTypeMap, this.checkTypeCodeList)
        }
      })
    },
    // 将标准码列表转换为map
    convertCodeListToMap (map, codeList) {
      codeList.map((item) => {
        map.set(item.value, item)
      })
    }
  },
  async created () {
    // 判断是否缓存了标准码数据，是则直接使用缓存，否则请求接口
    let paramTypeCode = window.localStorage.getItem('paramTypeCode')
    let dataTypeCode = window.localStorage.getItem('dataTypeCode')
    let controlTypeCode = window.localStorage.getItem('controlTypeCode')
    let checkTypeCode = window.localStorage.getItem('checkTypeCode')
    if (paramTypeCode) {
      this.paramTypeCodeList = JSON.parse(paramTypeCode)
    } else {
      await this.getParamTypeCode()
    }
    if (dataTypeCode) {
      this.dataTypeCodeList = JSON.parse(dataTypeCode)
      this.convertCodeListToMap(this.dataTypeMap, this.dataTypeCodeList)
    } else {
      await this.getDataTypeCode()
    }
    if (controlTypeCode) {
      this.controlTypeCodeList = JSON.parse(controlTypeCode)
      this.convertCodeListToMap(this.controlTypeMap, this.controlTypeCodeList)
    } else {
      await this.getControlTypeCode()
    }
    if (checkTypeCode) {
      this.checkTypeCodeList = JSON.parse(checkTypeCode)
      this.convertCodeListToMap(this.checkTypeMap, this.checkTypeCodeList)
    } else {
      await this.getCheckTypeCode()
    }
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.add-child-dialog {
  .btn-col {
    text-align: center;
    margin-top: 10px;
  }
}
</style>
